<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      body {
        margin: 0;
        padding: 0;
        /* background-color: #f0f0f0; */
      }
    </style>
    <title>Document</title>
  </head>
  <body>
    <div id="container"></div>
    <script src="./asserts/konva.min.js"></script>
    <script src="./canvas-konva-circle-animation.js"></script>
    <script>
      const stage = new Konva.Stage({
        container: 'container',
        width: window.innerWidth,
        height: window.innerHeight,
      })

      const backgroudLayer = new Konva.Layer()

      stage.add(backgroudLayer)

      // 画布中心点坐标
      const centerX = stage.width() / 2
      const centerY = stage.height() / 2

      const innerRadius = 252 / 2
      const outerRadius = 220

      // 内环虚线
      const innerCircle = new Konva.Circle({
        x: centerX,
        y: centerY,
        radius: innerRadius,
        stroke: '#dadbe0',
        strokeWidth: 4,
        // 设置虚线，实线像素10，空像素4
        dash: [10, 4],
      })
      // 外环虚线
      const outerCircle = new Konva.Circle({
        x: centerX,
        y: centerY,
        radius: outerRadius,
        stroke: '#dadbe0',
        strokeWidth: 4,
        // 设置虚线，实线像素10，空像素4
        dash: [10, 4],
      })

      const centerElement = new BaseCircle({
        x: centerX,
        y: centerY,
        innerRadius: 132 / 2,
        outerRadius: 90,
        innerStyle: '#525a82',
        outerStyle: '#e1e1e1',
        text: '中心主题',
      })

      centerElement.addToGroupOrLayer(backgroudLayer)

      backgroudLayer.add(innerCircle)
      backgroudLayer.add(outerCircle)

      backgroudLayer.draw()

      // 动画层
      const animateLayer = new Konva.Layer()
      stage.add(animateLayer)

      const L2Group = new Konva.Group({
        x: centerX,
        y: centerY,
      })
      const L3Group = new Konva.Group({
        x: centerX,
        y: centerY,
      })

      const L2Element1 = new BaseCircle({
        x: innerRadius * Math.cos((Math.PI / 180) * 160),
        y: innerRadius * Math.sin((Math.PI / 180) * 160),
        innerRadius: 30,
        outerRadius: 40,
        innerStyle: '#faced6',
        outerStyle: '#e1e1e1',
        text: '二环1',
      })
      L2Element1.addToGroupOrLayer(L2Group)

      const L2Element2 = new BaseCircle({
        x: innerRadius * Math.cos((Math.PI / 180) * -60),
        y: innerRadius * Math.sin((Math.PI / 180) * -60),
        innerRadius: 30,
        outerRadius: 40,
        innerStyle: 'orange',
        outerStyle: '#e1e1e1',
        text: '二环2',
      })
      L2Element2.addToGroupOrLayer(L2Group)

      const L3Element1 = new BaseCircle({
        x: outerRadius * Math.cos((Math.PI / 180) * 60),
        y: outerRadius * Math.sin((Math.PI / 180) * 60),
        innerRadius: 40,
        outerRadius: 50,
        innerStyle: '#91bff8',
        outerStyle: '#e1e1e1',
        text: '三环1',
      })
      L3Element1.addToGroupOrLayer(L3Group)

      animateLayer.add(L2Group)
      animateLayer.add(L3Group)
      animateLayer.draw()

      // Konva 的帧动画系统
      // 设置每秒钟旋转 60度
      let rotateAnglePerSecond = 60
      const animate = new Konva.Animation((frame) => {
        // console.log(frame);
        // 函数内部每隔一帧时间（1s一般60帧，16毫秒多一点）执行一次
        // 计算当前帧需要旋转的角度
        // frame.timeDiff 获得上一帧到当前帧需要的时间
        const rotateAngle = (rotateAnglePerSecond * frame.timeDiff) / 1000

        L2Group.rotate(rotateAngle)

        // 获取所有二环组上的圆，内部进行反向旋转
        L2Group.getChildren().each((item, index) => {
          item.rotate(-rotateAngle)
        })

        L3Group.rotate(-rotateAngle)

        // 获取所有二环组上的圆，内部进行反向旋转
        L3Group.getChildren().each((item, index) => {
          item.rotate(rotateAngle)
        })
      }, animateLayer)

      // 启动动画
      animate.start()

      // Konva 的事件系统，jQuery 类似
      animateLayer.on('mouseover', () => {
        rotateAnglePerSecond = 10
        // 这里改变度数，会影响到 使用这个值的动画效果
      })
      animateLayer.on('mouseout', () => {
        rotateAnglePerSecond = 60
      })
    </script>
  </body>
</html>
